Menú CSS con efecto HOVER

Web Designer Wall es un blog que siempre me ha atraído por su diseño y una de las cosas que más me gusta es el menú tan original con efecto hover (El efecto hover nos permite definir un aspecto determinado cuando situamos el cursor sobre el objeto).

Ha sido creado con Photoshop valiéndose de la ayuda de imágenes vectoriales, yo le veo mucho mérito ya que aún con todas las herramientas a nuestro alcance sin imaginación de poco nos sirve.
El menú trae consigo un fondo por si deseamos añadirlo, esos manitas del Photoshop (que yo sé que hay muchos) lo tienen más sencillo para crear un fondo acorde con su blog así como otras imágenes o de distinto color.

Los que como yo unos aficionadillos tendremos que conformarnos con el menú sin fondo pero tampoco está nada mal que conste.

•  
• Home
• About
• RSS

Para el ejemplo lo he reducido de tamaño pero si queréis ver como quedaría con las medidas que proporciona la autora podéis verlo aquí.
La forma de añadirlo es muy sencilla. Justo antes de ]]></b:skin> añadimos los estilos para el menú.

Ver código

#menu {  list-style: none;  padding: 0;  margin: 0;  background: url(http://unllua.blu.livefilestore.com/y1pztIDCw3oJSgkJtu46GuTAU3C6ouPOmoKAN3XDHqZPBn17o1sRHuZE63gCRmph3WavY4TBNnTdmM/menu-bg.jpg) no-repeat;width: 774px;  height: 210px;position: relative;}
#menu span {  display: none;  position: absolute;}
#menu a {  display: block;  text-indent: -900%;  position: absolute;  outline: none;}
#menu a:hover {  background-position: left bottom;}
#menu a:hover span {  display: block;}
#menu .home {  width: 144px;  height: 58px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqz1qR1cmINNs5BFsUvy2Y31aDunhTr-7tDmw4zX3PjHKRqQW4z9czv_x6XmLmtN33alC3HVIBBilSrAj8WuE85oErXusH6pfMaS3SoFC7GA6Jjx_BnFiX0T5MEu259GQ7Bwoo-w/s320-r/home.gif) no-repeat;  left: 96px;  top: 73px;}
#menu .home span {  width: 86px;  height: 14px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSZwjf83ESJh55YUO81DZy11h_cs1H0UR4mHhllQgUx7G1XkQKYEGtXlZHeUXYbd1tkDh1Ef5cVZoeJsIaGwPu0ENhCzB0Hcsui-HJChqkQFhS1qHPap2jH-94PpS9JXH_FAzog/s320-r/home-over.gif) no-repeat;left: 28px;top: -20px;}
#menu .about {  width: 131px;  height: 51px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wQ_CS-HWvjfRlNXoql3p0aiZYQn3cQaDJuXIywldHInV9JStlrtUQYmQ9LcD5nLVl8rf7yTCVKcGka8vD77oWpz6lbmWAA_NlwBs2j8MEluTCMLA8drTThiEd2_IK_b6fGJGKQ/s320-r/about.gif) no-repeat;  left: 338px;  top: 97px;}
#menu .about span {  width: 40px;  height: 12px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbjYF6LQw88KEsAeTFH_yBh3VBDPIuBihmOlBMmIpSnVrCHxr8BTSYkYwNOf5oJKLnYz4Vp58xAteEAVRp9mvykBwEielhQyFDk9LCxO4TqHPbVAbFC5B7WqtH4w921sPm6lgkg/s320-r/about-over.gif) no-repeat;  left: 44px;  top: 54px;}
#menu .rss {  width: 112px;  height: 47px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrjV_knMcx5S8daD9XNzkLjZn_SIGhmyRJgxtyPt_uuD5FoebC7K1QTvSaBffsYNJqm3GIy_EfImaogpzlS0esIy33UMF06xRhaq_rS7JNbZhQRxo3F4lp_oz8aU4TroKG4AxsQ/s320-r/rss.gif) no-repeat;  left: 588px;  top: 94px;}
#menu .rss span {  width: 92px;  height: 20px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi480CHpve08I2FFY1IeULeGDwJSBfq9JgmegFTDO2WvjE7evRHCCKbzNphbU8poKGiKyNdhPYnMTD4OgDGnaK2_dDkneGp-rQBcwiZ-2itL8-e_KuSsebh1YvmCcqH7_ijITRgVg/s320-r/rss-over.gif) no-repeat;  left: 26px; top: -20px;}

He dejado las imágenes añadidas para facilitar la ubicación de cada una y ver el efecto si decidís probar, pero recomiendo alojarlas en vuestro servidor y sustituirlas, por si en cualquier momento fueran eliminadas.

El siguiente paso es añadir un elemento de página HTML/Javascript y en su interior añadimos:

<ul id="menu">  <li><a href="url-de-la-pagina" class="home">Home <span></span></a></li>  <li><a href="url-perfil" class="about">About <span></span></a></li>  <li><a href="url-del-feed" class="rss">RSS <span></span></a></li></ul>

Ya soló nos queda arrastrar la etiqueta, añadir la url de la página de inicio, el perfil y enlace a nuestro feed.

¿Y eso es todo? no, seguramente las medidas del menú no cuadran bien en tu blog porque quieres añadirlo en la sidebar, puedes hacer esas modificaciones de las medidas en el código que añadimos a la plantilla, por ejemplo:

Color rojo: Puedes cambiar la medida dependiendo el espacio donde se va a añadir el menú-

Color amarillo modifica los valores del tamaño de la imagen.

Color  azul podemos situar la imagen, ubicarla hasta el lugar deseado.

Por último color morado (lila) añadimos imagen de fondo, de no desearla omitimos añadir la url.

Imágenes a descargar:

#menu { (Fondo del menú)

#menu .home {

#menu .home span {

#menu .about {

#menu .about span {

#menu .rss {

#menu .rss span {

También podéis descargarlas de la página del autor en archivo zip.

Y ahora si, ya está completo y podemos empezar.